<template>
  <div class= "app">
      <!-- 第一次使用Game组件 -->
       <Game >
           <template scope="{gname}">
               <ul>
                   <li v-for="(item,index) in gname" :key ="index">{{item}}</li>
               </ul>
           </template>
       </Game >
          <!-- 第二次使用Game组件 -->
       <Game >
            <template scope ="obj">
               <ol>
                   <li v-for="(item,index) in obj.gname" :key = "index">{{item}}</li>
               </ol>
           </template>
       </Game >
          <!-- 第三次使用Game组件 -->
       <Game >
           <template scope="GNAMEG">
               <h4 v-for = "(item,index) in GNAMEG.gname" :key="index">{{item}}</h4>
           </template>
       </Game >
    </div>
 
</template>

<script>
import Game from './components/Game'
export default {
  name: 'App',
  components: { Game },
  
  
}
</script>

<style >
/*base*/
.app{
    display: flex;
    justify-content: space-around;
}
</style>